<template>
    <div id="searchAlls">
        <h3 class="searchAllh3">找到约{{length}}条结果</h3>
        <div class='searchAll' v-for='contenta in contentas' :key="contenta.aid">
            <router-link tag="h3" :to="{path:'/article',query:{aid:contenta.aid}}">{{contenta.title}}</router-link>
            <p class="p1">{{contenta.content}}</p>
            <p>{{contenta.likeCilck}} 获赞&nbsp;&nbsp;&nbsp;{{contenta.response}} 评论</p>
        </div>
        <div class='searchAll' v-for='contentt in contentts' :key="contentt.aid">
            <router-link tag="h3" :to="{path:'/article',query:{aid:contentt.aid}}">{{contentt.title}}</router-link>
            <p class="p1">{{contentt.content}}</p>
            <p>{{contentt.likeClick}} 获赞&nbsp;&nbsp;&nbsp;{{contentt.response}} 评论</p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
             query:'',
             val: '',
             contentas:'',
             contentts:'',
             length:0
            }
    },
    created(){
      this.query=this.$route.query.searchval
      this.val='%'+this.query+'%',
      console.log('ok')
    //   console.log(this.val)   
      this.$axios.get('/api/search/article',{params:{val:this.val}})
                .then(res=>{
                    console.log('res:',res)
                    this.contentas=res.data.data
                    if(this.contentas.length)
                        this.length+=this.contentas.length
                })
                .catch(err=>{
                    console.log('err:',err)
                })
      this.$axios.get('/api/search/topic',{params:{val:this.val}})
                .then(res=>{
                    console.log('topicres:',res)
                    this.contentts=res.data.data
                    if(this.contentts.length)
                        this.length+=this.contentts.length
                })
                .catch(err=>{
                    console.log('err:',err)
                })
    },
    watch: {
        $route(to,from){
            this.query=this.$route.query.searchval
            this.val='%'+this.query+'%'
    //      this.$axios.get('/api/search/article',{params:{val:this.val}})
                .then(res=>{
                    console.log('res:',res)
                    this.contentas=res.data.data
                    if(this.contentas.length)
                        this.length+=this.contentas.length
                })
                .catch(err=>{
                    console.log('err:',err)
                })
      this.$axios.get('/api/search/topic',{params:{val:this.val}})
                .then(res=>{
                    console.log('topicres:',res)
                    this.contentts=res.data.data
                    if(this.contentts.length)
                        this.length+=this.contentts.length
                })
                .catch(err=>{
                    consol
                })
        }
    }
}
</script>
<style>
#searchAlls{
    width: 1200px;
    position: relative;
    left: 50%;
    top: 200px;
    margin-left: 20px;
    transform: translateX(-50%);
}
#searchAlls .searchAllh3{
    color: #757575;
    font-weight: normal;
    position: relative;
    /* top: 260px; */
    line-height: 1.2;
    margin-left: 20px;
}
#searchAlls .searchAll{
    position: relative;
    /* top: 260px; */
    margin:15px;
}
#searchAlls h3{
    font-weight: 400;
    color:rgb(64,158,255);
    margin-top: 20px;
    padding-bottom: 0;
}
#searchAlls p{
    margin-top: 10px;
    width: 700px;
    line-height: 24px;
    max-height: 48px;
    overflow: hidden;
}
</style>